<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="ecStat.js"></script>
    <link rel="stylesheet" href="css/echarts.css">
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="first"></div>
<div id="secord"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<div id="serverth"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例  $("#main")
    var myChart1 = echarts.init(document.getElementById('first'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {
            show:true
        },
        legend: {
            data:['销量']
        },
        //xAxis: {type:"category"}, value
        xAxis: {
            type:"category"
        },
        yAxis: {},
        dataset:{ 
            source: [
                 ['product', '2015'],
                 ['衬衫','5'],
                 ['羊毛衫','20'],
                 ['雪纺衫','35'],
                 ['裤子','10'],
                 ['高跟鞋','10'],
                 ['袜子','20'],
            ]
        },
        series: [{
            name: '销量',
            type: 'bar',
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    
    // 第二个
    // echart 实例
    var mychart2 = echarts.init(document.getElementById('secord'));
    // 配置项和数据
    var option2 ={
        // 标题
      title:{
        text:'Echart实例'
      },
      tooltip:{
        trigger: 'axis'
      },
      legend:{
          data:['销量','销量2']
      },
      xAxis:{
       type:'category'
      },
      yAxis:{},
      dataset:{
          source:[
              ['product','2015','2016'],
              ['衬衫','50','30'],
              ['羊毛衫','70','40'],
              ['雪纺衫','80','300'],
              ['裤子','50','280'],
          ]
      },
      series:[
          {
              name:'销量',
              type:'bar'
          },
          {
              name:'销量2',
              type:'line'
          },
      ]
    };
    mychart2.setOption(option2);

    // 第三个
    // echart实例
    var mychart3 = echarts.init(document.getElementById('third'));
    // 数据
    var height = [70, 65, 63, 72, 81, 83, 66, 75, 80, 75, 79, 76, 76, 69, 75, 74, 85, 86, 71, 64, 78, 80, 74, 72, 77, 81, 82, 80, 80, 80, 87];
    // histogram直方图计算每个数字的个数
    var bins = ecStat.histogram(height);
    console.log(bins)
    // 配置项和数据
    var option3={
        color:[
            'blue'
        ],
        title:{
            text:'直方图'
        },
        tooltip:{
            trigger:'axis'
        },
        xAxis:{
            type:'value',
             //这个一定要设，不然barWidth和bins对应不上
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
            scale:true
        },
        yAxis:{
            type:'value',
        },
        // dataset:{
        //     source:[
        //         bins.data,
        //     ]
        // },
        series:[{
            type:'line',
            barwidth:'99.3%',
            label:{
                show:true,
                position:'insideTop'
            },
            data:bins.data
        },
    ]
    };
    console.log(bins.data)
    mychart3.setOption(option3);

    // 第四个
    // echart实例
    var mychart4 = echarts.init(document.getElementById('fourth'));
    var option4 = {
     title:{
         text:'折线图'
     },
     grid:{
     containLabel:true,
     },
     tooltip:{
         trigger:'axis'
     },
     legend:{
         data:['单机耗时','集群耗时']
     },
     xAxis:{
         name:'日质量/GB',
         type:'value',
         interval:5,
     },
     yAxis:{
         name:'耗时量/秒',
         type:'value'
     },
     dataset:{
         source:[
             ['product','单机耗时','集群耗时'],
             ['2',20,24],
             ['6','40','72'],
             ['10','50','120'],
             ['14','60','170'],
             ['20','70','240'],
             ['25','110','300'],
             ['30','120','360'],
             ['38','130','440'],
         ]
     },
    series:[
        {
            type:'line',
            name:'单机耗时',
            encode:{
                x:'product',
                y:'单机耗时'
            }
        },
        {
            type:'line',
            name:'集群耗时',
            encode:{
                x:'product',
                y:'集群耗时'
            }
        }
    ]
    };
    mychart4.setOption(option4);

    // 第五个
    // ecart实例
    var mychart5 = echarts.init(document.getElementById('fifth'));
    var option5 = {
       title:{
           text:'柱状图'
       },
       tooltip:{
        //  trigger触发器  
          trigger:'axis'
       },
       legend:{
           data:['2015','2016','2017']
       },
       dataset:{
           source:[
               ['product','2015','2016','2017'],
               ['华为','41','89','95'],
               ['小米','88','71','52'],
               ['苹果','85','65','82'],
               ['三星','75','55','39']
            ]
        },
        xAxis:{
         type:'category'
         },
        yAxis:{
         type:'value'
         },
       series:[
           {
               type:'bar',
               name:'2015',
               label:{
                   show:'true',
                   position:'top'
               },
               
           },
           {
               type:'bar',
               name:'2016',
               label:{
                   show:'true',
                   position:'top'
               }
           },
           {
               type:'bar',
               name:'2017',
               label:{
                   show:'true',
                   position:'top'
               }
           }
       ]
    }
    mychart5.setOption(option5)

    // 第六个
    var mychart6 = echarts.init(document.getElementById('sixth'));
    var option6 = {
        // backgroundColor: '#2c343c',
       title:{
         text:'雷达图'
       },
       tooltip:{
        //    trigger:'axis'
       },
       legend:{
           show:true,
           data:['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
       },
       radar:{
           name:{
               textstyle:{
                   colco:'#fff',
                   backgrounColor:'#999',
                   //  文字边框圆角半径
                   borderRadius:3,
                //    文字内边距上，右，下，左
                padding:[3,4]
               }
           },
        //    指示器
        indicator:[
           { name: '销售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '信息技术（Information Techology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研发（Development）', max: 52000},
           { name: '市场（Marketing）', max: 25000}
        ]
       },
       dataset:{
           source:[
        //    ['product','预算分配（Allocated Budget）','实际开销（Actual Spending）'],
               ['销售（sales）','4300','5000'],
               ['管理（Administration）','10000','14000'],
               ['信息技术（Information Techology）','28000','28000'],
               ['客服（Customer Support）','35000','31000'],
               ['研发（Development）','50000','42000'],
               ['市场（Marketing）','19000',' 21000'],
           ]
       },
       series:[
           {
            name: '预算分配（Allocated Budget）',
            type:"radar",
            seriesLayoutBy: 'row',
        //     data : [
        //     {
        //         value : [4300, 10000, 28000, 35000, 50000, 19000],
        //         name : '预算分配（Allocated Budget）'
        //     },
        //      {
        //         value : [5000, 14000, 28000, 31000, 42000, 21000],
        //         name : '实际开销（Actual Spending）'
        //     }
        // ]
           },
        //    {
        //     name: '实际开销（Actual Spending）',
        //     type:"radar",
        //     seriesLayoutBy: 'row'
        //    },
       ]
    }
    mychart6.setOption(option6)
    // 第七个
    var mychart7 = echarts.init(document.getElementById('serverth'));
    var option7 = {
      title:{
          text:'饼图',
          subtext:'123'
      },
      tooltip:{
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend:{
        data:['2013','2014']
      },
      dataset:{
        source:[
            ['product','2013','2014'],
            ['ss',200,150],
            ['yy',120,130],
            ['zz',110,130], 
        ]
      },
      series:[
          {
        type:'pie',
        radius:'60',
        center:['25%','30%'],
        encode: {
            itemName: 'product',
            value: '2013'
        },
        roseType:'radius',
        
      },
      {
        type:'pie',
        radius:'60',
        center:['25%','90%'],
        encode: {
            itemName: 'product',
            value: '2014'
        }
      }
      ]
    }
    mychart7.setOption(option7)
</script>
</body>
</html>